<!--
 * @Author: 李金深 2896583081@qq.com
 * @Date: 2023-06-07 17:03:53
 * @LastEditors: 李金深 2896583081@qq.com
 * @LastEditTime: 2023-06-28 11:08:02
 * @FilePath: /com.huizhouyiren.web.d0101/src/views/email/components/popupInfo.vue
 * @Description: 信息弹窗组件
-->
<script setup>
import { ref } from 'vue';
let showModal = ref(false)

defineProps({
    title: {
        type: String,
        default: 'system.tip'
    },
    useButton: {
        type: Boolean,
        default: true,
    },
    useDefaultButton: {
        type: Boolean,
        default: true,
    },
    confirmText: {
        type: String,
        default: "system.confirmText"
    },
    cancelText: {
        type: String,
        default: "system.cancelText"
    },
    width: {
        type: String,
        default: "5.625rem"
    },
    loading: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['confirmFunc', 'cancelFunc'])

/**
 * @description: 打开弹窗
 * @return {*}
 */
const openModal = function () {
    showModal.value = true
}
/**
 * @description: 关闭弹窗
 * @return {*}
 */
const closeModal = function () {
    showModal.value = false
}
/**
 * @description: 点击取消按钮
 * @return {*}
 */
const cancel = () => {
    showModal.value = false

    emit('cancelFunc')
}
/**
 * @description: 点击确认按钮触发的事件
 * @return {*}
 */
const confirm = () => {
    emit('confirmFunc')
}
defineExpose({
    openModal,
    closeModal
})
</script>
<template>
    <n-modal v-model:show="showModal">
        <div class="flex flex-col w-full bg-white rounded" style="width: 400px;">
            <div class="flex items-center justify-center w-full px-4 font-bold border-b border-solid border-borderColor"
                style="height: 60px;">
                {{ $t(title) }}
            </div>
            <div class="p-4 py-8">
                <slot></slot>
            </div>
            <div v-if="useButton"
                class="flex items-center justify-around w-full p-4 border-t border-solid border-borderColor">
                <slot name="button"></slot>
                <n-button type="default" v-if="useDefaultButton" :style="{ width }" @click="cancel">{{ $t(cancelText)
                }}</n-button>
                <slot name="button_center"></slot>
                <n-button :loading="loading" type="primary" v-if="useDefaultButton" :style="{ width }" @click="confirm">{{
                    $t(confirmText)
                }}</n-button>
                <slot name="button_right"></slot>
            </div>
        </div>
    </n-modal>
</template>